<template>
    <view class="input-wrapper border">
        <text class="icon-phone icon-btn"/>
        <input v-model="verificationCode" placeholder-style="color: #999;" class="uni-input" placeholder="请输入验证码"/>
        <view class="withdraw-btn" v-if="!isShowTime" @tap="getVerificationCode">{{txt}}</view>
        <view v-else class="withdraw-btn time-btn">{{time}}s</view>
    </view>
</template>

<script>
    import service from "@/service";
    import { mapGetters } from 'vuex';
    export default {
        name: "verificationCode",
        props: {
            value: {
                type: String,
                default: ''
            },
            phone: {
                type: String,
                default: ''
            },
            type: {
                type: Number,
                default: 1
            },
        },
        data(){
            return{
                verificationCode: '',
                isShowTime: false,
                time: 60,
                timer: null,
                txt: '获取验证码',
            }
        },
        watch: {
            verificationCode(newVal){
                this.$emit('input', newVal)
            }
        },
        methods: {
            sendCode () {
                uni.showLoading({
                    title: '',
                });
                let params = {
                    type: this.type
                }
                if(this.phone){
                    params.phone = this.phone
                }
                service.mineService.sendCode({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.time = 60;
                            this.isShowTime = true;
                            this.txt = '重新获取';
                            this.countDown();
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {

                    },
                });
            },
            getVerificationCode(){
                //sendCode
                this.sendCode();
            },
            countDown(){
                this.timer = setInterval(()=>{
                    this.time--;
                    if(this.time === 0){
                        clearInterval(this.timer)
                        this.isShowTime = false
                    }
                }, 1000)
            }
        }
    }
</script>

<style scoped lang="scss">
    .input-wrapper{
        width: 690rpx;
        height: 88rpx;
        position: relative;
        margin-bottom: 34rpx;
        &.border{
            border:1px solid #E5E5E5;
        }
        .icon-btn{
            font-size: 56rpx;
            color: #2BA8FC;
            position: absolute;
            left: 22rpx;
            top: 50%;
            transform: translateY(-50%);
            margin-top: 4rpx;
        }
        .uni-input{
            line-height: 88rpx;
            height: 88rpx;
            box-sizing: border-box;
            width: 100%;
            padding-left: 113rpx;
        }
        .withdraw-btn{
            position: absolute;
            right: 30rpx;
            top: 0;
            height: 88rpx;
            color:#2BA8FC;
            line-height: 88rpx;
            z-index: 2;
        }
    }
</style>